<template>
  <div class="cate-container">
    <!--    面包屑导航-->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button type="primary" @click="addClassGoods">添加分类</el-button>
<!--      渲染表格数据-->
      <el-table :data="cateList"
                border
                style="width: 100%"
                row-key="cat_id"
                height="350"
                :tree-props="{children: 'children'}">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="cat_name"  label="商品分类"></el-table-column>
        <el-table-column  label="是否有效">
          <template slot-scope="scope">
            <i :class="[scope.row.cat_deleted ? 'el-icon-error':'el-icon-success']"
               :style="scope.row.cat_deleted ? 'color:red;font-size:18px':'color:#13a4ac;font-size:18px'"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="cat_level"  label="排序">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
            <el-tag v-else-if="scope.row.cat_level===1" type="success">二级</el-tag>
            <el-tag v-else type="warning">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column   label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editCate(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCate(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

<!--      分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="cateInfo.pagenum"
          :page-sizes="[5, 10, 15, 30]"
          :page-size="cateInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
<!--    添加分类-->
    <el-dialog
        title="添加分类"
        :visible.sync="addClassGoodsDialogVisible"
        width="50%"
        @close="addClassGoodsDialogClose"
    >
      <div>
        <el-form ref="addCateRef"  label-width="90px" :model="addCate" :rules="addCateRules">
          <el-form-item label="分类名称:" prop="cat_name">
            <el-input v-model="addCate.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类:">
            <el-cascader
                clearable
                chage-on-select
                v-model="parentCatePropsValue"
                :options="parentCateList"
                :props="parentCateProps"
                @change="addParentCateProps"
                ></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addClassGoodsDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveAddGoodsCate" >确 定</el-button>
  </span>
    </el-dialog>
    <!--    编辑分类dialog对话框-->
    <el-dialog
        title="编辑分类信息"
        :visible.sync="editCateDialogVisible"
        width="50%"
    >
      <span>
        <el-form ref="editForm" :model="editCateList"  label-width="90px">
            <el-form-item label="分类名称：">
                <el-input v-model="editCateList.cat_name"></el-input>
            </el-form-item>

        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editCateDialogVisible=false">取 消</el-button>
    <el-button type="primary" @click="saveEditCateForm">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {addCategories, deleteCategories, editCategories, goodsCategories} from "@/utils/loginAPI";


export default {
  name: "Cate",
  data(){
    return{
      cateInfo:{
        type:'',
        pagenum:1,
        pagesize:5,
      },
      cateList:[],
      total:0,
      addClassGoodsDialogVisible:false,
      addCate:{
        //分类名称
        cat_name:'',
        //分类父 ID
        cat_pid:0,
        // 分类层级
        cat_level:0,
      },
      addCateRules:{
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ],
      },
      //父级分类列表
      parentCateList:[],
      parentCatePropsValue:[],
      parentCateProps:{
        expandTrigger:'hover',
        label:'cat_name',
        value:'cat_id',
        children: 'children'
      },
      editCateDialogVisible:false,
      editCateList:{},
    }
  },
  created() {
    this.initGoodsCate();
  },
  methods:{
    async initGoodsCate(){
      const {data:res}=await goodsCategories(this.cateInfo);
      if(res.meta.status!==200) return this.$message.error(res.meta.msg);
      this.cateList=res.data.result;
      this.total=res.data.total;
      // console.log(res);
    },

    handleSizeChange(newSize){
      this.cateInfo.pagesize=newSize;
      // console.log(newSize);
      this.initGoodsCate();
    },
    handleCurrentChange(newNum){
      this.cateInfo.pagenum=newNum;
      // console.log(newNum);
      this.initGoodsCate();
    },
    async addClassGoods(){
      const {data:res}=await goodsCategories({type: 2});
      if(res.meta.status!==200) return this.$message.error(res.meta.msg);
      //获取分类父级选择数据
      this.parentCateList=res.data;

      // console.log('xingdeshuju',res);
      this.addClassGoodsDialogVisible=true;
    },
    //监听分类父级选择数据
    addParentCateProps(){
      console.log(this.parentCatePropsValue);
      if(this.parentCatePropsValue.length>0){
        this.addCate.cat_pid=this.parentCatePropsValue[this.parentCatePropsValue.length-1];
        this.addCate.cat_level=this.parentCatePropsValue.length;
      }else{
        this.addCate.cat_pid=0;
        this.addCate.cat_level=0;
      }
    },
    async saveAddGoodsCate(){
      const {data:res}=await addCategories(this.addCate);
      if(res.meta.status!==201) return this.$message.error(res.meta.msg);
      // console.log(res);
      await this.initGoodsCate();
      this.addClassGoodsDialogVisible = false;
    },
    addClassGoodsDialogClose(){
      this.$refs.addCateRef.resetFields();
      this.parentCatePropsValue=[];
    },
    //删除
    deleteCate(cate) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
          const {data:res}=await deleteCategories(cate.cat_id);
          if(res.meta.status!==200) return this.$message.error(res.meta.msg);
          await this.initGoodsCate();
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //编辑
    editCate(cate){

      this.editCateList=cate;
      this.editCateDialogVisible=true;
    },
    async saveEditCateForm(){
      const {data:res}=await editCategories(this.editCateList.cat_id,this.editCateList);
      if(res.meta.status!==200) return this.$message.error(res.meta.msg);
      this.editCateDialogVisible=false;
    }

  }
}
</script>

<style scoped>

</style>
